<template>
  <SeachTable 
    :tableType="1"
    ref="seachTableRef"
    class="mySeachTable"
    :tableIndex="true"
    :tableWidth="100"
    :isShowPage="false"
    :forms="tableForms"
    :btnLefts="btnLefts"
    :btnRights="btnRights"
    :tableLoading="tableLoading"
    :tableConfig="tableConfig"
    :tableData="tableData"
    @handlerSearch="handlerSearch"
  >
    <template #switch="{row}">
      <el-switch
        :modelValue="row.levelStatus === 1"
        v-if="row.levelType"
        @change="(e) => handlerState(e, row)"
        size="large"
      />
    </template>
    <template #userTotal="{row}">
      <el-button @click="toMemberListPage(row)" text type="primary">{{ row.userTotal }}</el-button>
    </template>
  </SeachTable>
  <EditDialog @close="closeEditDialog" :detail="itemDetail" :show="editDialogShow" />
</template>

<script setup>
import { useCurd } from './Hooks/index';
import { useMemberQuery } from '@/views/OperateManagement/MemberManagement/MemberChildManagement/Hooks/index'
import EditDialog from './Components/EditDialog.vue';

const {
  seachTableRef,
  tableForms, 
  btnLefts, 
  btnRights, 
  tableLoading, 
  tableConfig, 
  tableData, 
  handlerSearch,
  handlerState,
  itemDetail,
  editDialogShow,
  closeEditDialog
 } = useCurd();

const router = useRouter();
const { memberQuery } = useMemberQuery();
const toMemberListPage = (row) => {
  router.push({
    path:'/operateManagement/memberManagement/memberChildManagement/memberChildManagementIndex',
  });
  memberQuery.value.membershipLevelId = row.id;
};
</script>

<style lang="less" scoped>
.mySeachTable{
  :deep(.search-table){
    .line-block,.jg{
      display: none;
    }
    .defaultTable{
      height: calc(100% - 70px) !important;
    }
  }
}
</style>
